<template>
	<view>
		<view class="w-page-box">
			<view class="hospital-box">
				<view class="hospital-gs-box flex flex-column align-center">
					<view class="gs-logo">
						<image src="/static/images/jing/logo.png" alt="" mode="widthFix"></image>
					</view>
					<view class="gs-name">沈阳京科私密美型中心</view>
				</view>
				<view class="gs-content-detail">
					<view class="gs-label-item py-2 flex align-center justify-between">
						<view class="l-box flex align-center">
							<view class="l-icon flex align-center">
								<image src="@/static/images/phone-icon.png" mode="widthFix"></image>
							</view>
							<view class="l-name">热线电话：{{info.hot_mobile}}</view>
						</view>
						<view class="r-value">
							<text class="bd-mobile-btn">直接拨打</text>
						</view>
					</view>
					<view class="gs-label-item py-2 flex align-center justify-between">
						<view class="l-box flex align-center">
							<view class="l-icon flex align-center">
								<image src="@/static/images/mobile-icon.png" mode="widthFix"></image>
							</view>
							<view class="l-name">固定电话：{{info.gu_mobile}}</view>
						</view>
						<view class="r-value">
							<text class="bd-mobile-btn">直接拨打</text>
						</view>
					</view>
					<view class="gs-label-item py-2 flex">
						<view class="l-box flex align-center">
							<view class="l-icon">
								<image src="@/static/images/address-icon.png" mode="widthFix"></image>
							</view>
							<view class="l-name">医院地址：{{info.hospital_address}}</view>
						</view>
					</view>
					<view class="gs-detail">
						<view class="address-map">
							<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude"
								:markers="covers">
							</map>
						</view>
						<view class="gs-test">
							{{info.hospital_desc}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {postHospitalInfo} from '@/api/expert.js'
	export default {
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id:1,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/images/location.png',
					width:30,
					height:30
				}],
				info:{}
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			getInfo(){
				postHospitalInfo().then(res=>{
					this.info=res.data
					this.latitude=res.data.hospital_latitude
					this.longitude=res.data.hospital_longitude
					this.covers[0].latitude=res.data.hospital_latitude
					this.covers[0].longitude=res.data.hospital_longitude
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.w-page-box {
		padding: 20rpx;
		background-color: #F6F6F6;

		.hospital-box {
			width: 100%;
			background-color: white;
			padding: 0 30rpx;
			border-radius: 20rpx;

			.hospital-gs-box {
				padding-top: 53rpx;
				padding-bottom: 10rpx;
				margin-bottom: 50rpx;

				.gs-logo {
					width: 152rpx;
					margin-bottom: 26rpx;

					image {
						width: 100%;
						height: auto;
					}
				}

				.gs-name {
					font-size: 32rpx;
					color: #616161;
					font-weight: 500;
					line-height: 1;
				}
			}

			.gs-content-detail {
				.gs-label-item {
					border-bottom: solid 1rpx #F2F2F2;

					.l-box {
						.l-icon {
							width: 40rpx;
							margin-right: 13rpx;

							image {
								width: 100%;
								height: auto;
							}
						}
					}

					.r-value {
						.bd-mobile-btn {
							font-size: 26rpx;
							color: #00A735;
							font-weight: bold;
							text-decoration: underline #00A735;
						}
					}
				}

				.gs-detail {
					width: 100%;
					padding-bottom: 100rpx;

					.address-map {
						width: 100%;
						margin-bottom: 26rpx;

						image {
							width: 100%;
						}
					}

					.gs-test {
						font-size: 26rpx;
						color: #282828;
						font-weight: 500;
					}
				}
			}
		}
	}
</style>
